<%- include('../../layouts/base/header', { title: '账户安全' }) %>

<div class="min-h-screen py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row gap-8 max-w-7xl mx-auto">
            <%- include('../../layouts/user/nav', { user: user }) %>

            <div class="flex-1 space-y-6">
                <div id="security" class="bg-white rounded-lg border">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">账户安全</h3>
                        <p class="mt-1 text-sm text-gray-500">管理您的密码和安全设置</p>
                    </div>

                    <div class="px-6 py-6 space-y-6">
                        <%- include('../../components/alert', { type: 'error', message: error }) %>
                        <%- include('../../components/alert', { type: 'success', message: success }) %>
                        <!-- 修改密码 -->
                        <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                            <div>
                                <h4 class="text-sm font-medium text-gray-900">密码</h4>
                                <p class="text-sm text-gray-500">修改密码后需要重新登录</p>
                            </div>
                            <button onclick="openChangePasswordModal()"
                                    class="px-4 py-2 text-sm font-medium text-blue-600 border border-blue-600 rounded-md hover:bg-blue-50 transition-colors duration-200">
                                修改密码
                            </button>
                        </div>
                    </div>
                </div>

                <div class="bg-white p-4 border border-gray-200 rounded-lg">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h4 class="text-sm font-medium text-gray-900">登录方式</h4>
                            <p class="text-sm text-gray-500">绑定其他登录方式</p>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <% if (enableGitHub) { %>
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                                <div class="flex items-center space-x-3">
                                    <i class="fab fa-github fa-2xl text-gray-600"></i>
                                    <div>
                                        <p class="text-sm font-medium text-gray-900">GitHub</p>
                                        <p class="text-xs text-gray-500">连接您的 GitHub 账号</p>
                                    </div>
                                </div>
                                <span class="text-xs text-green-600 font-medium">
                                    <% if (user.authentications.some(auth => auth.provider === 'github')) { %>
                                        <form action="/auth/unlink/github" method="POST">
                                            <input type="hidden" name="_method" value="DELETE">
                                            <%- include('../../components/button', { text: '取消绑定', type: 'submit', icon: 'fas fa-circle-xmark', variant: 'danger', className: '!px-3 !py-1.5' }) %>
                                       </form>
                                    <% } else { %>
                                        <%- include('../../components/button', { text: '绑定', href: '/auth/github', icon: 'fas fa-circle-plus', className: '!px-3 !py-1.5' }) %>
                                    <% } %>
                                </span>
                            </div>
                        <% } %>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow border-l-4 border-red-500">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-red-600">危险操作</h3>
                        <p class="mt-1 text-sm text-gray-500">这些操作无法撤销，请谨慎操作</p>
                    </div>

                    <div class="px-6 py-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <h4 class="text-sm font-medium text-gray-900">删除账户</h4>
                                <p class="text-sm text-gray-500">永久删除您的账户和所有相关数据</p>
                            </div>
                            <button class="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md hover:bg-red-50 transition-colors duration-200">
                                删除账户
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%- include('../../components/modal', { modalId: 'changePasswordModal', content: include('../../partials/change-password') }) %>

<script>
    function openChangePasswordModal() {
        const modal = document.getElementById('changePasswordModal')
        const content = document.getElementById('changePasswordModalContent')
        modal.classList.remove('opacity-0', 'invisible')
        content.classList.remove('scale-90')
        content.classList.add('scale-100')
    }

    document.addEventListener('DOMContentLoaded', function () {
        <% if (locals.customError || locals.customSuccess) { %>
        openChangePasswordModal()
        <% } %>
    })
</script>

<%- include('../../layouts/base/footer') %>